<template>
  <div>
    <!-- <mt-header style="background-color:#ff4d4f;color:#fff" fixed title="我的"></mt-header> -->
    <div class="main">
      <div class="main_top">
        <div class="head">
          <ul v-if="Identity==0">
            <li class="name">{{infoData.Name}}</li>
            <li class="sta">{{infoData.Mobile}}</li>
          </ul>
          <ul v-else>
            <li class="name">{{name}}</li>
          </ul>
        </div>
        <div class="head_footer">
          <ul>
            <li @click="activity_list">
              <div class="icon">
                <i class="iconfont iconjilu"></i>
              </div>
              <div class="titi">签到记录</div>
            </li>
            <li
              @click="information"
              style="border-left:1px solid #eee;width:49.5%"
              v-if="Identity==0"
            >
              <div class="icon">
                <i class="iconfont icongerenxinxi2"></i>
              </div>
              <div class="titi">个人信息</div>
              <!-- <span class="span_icon"><i class="iconfont icongerenxinxi2"></i> <span>个人信息</span> </span> -->
            </li>
            <li @click="Statistics" style="border-left:1px solid #eee;width:49.5%" v-else>
              <div class="icon">
                <i class="iconfont iconhuodongtongji"></i>
              </div>
              <div class="titi">活动统计</div>
              <!-- <span class="span_icon"><i class="iconfont icongerenxinxi2"></i> <span>个人信息</span> </span> -->
            </li>
          </ul>
        </div>
      </div>
      <div class="list">
        <mt-cell v-on:click.native="goUrl" title="十一中学生行乡录" is-link>
          <i class="iconfont iconjiaozuoye icon"></i>
        </mt-cell>
        <mt-cell v-if="Identity==0" to="/wait" title="待签到活动" is-link>
          <i class="iconfont icondaiqiandao icon"></i>
        </mt-cell>
        <!-- <mt-cell v-if="Identity==1" to="/Statistics" title="活动统计" is-link>
          <i class="iconfont icongerenxinxi1 icon"></i>
        </mt-cell>-->
        <mt-cell v-if="Identity==0" to="/new_pass" title="更改密码" is-link>
          <i class="iconfont icongenggaimima icon"></i>
        </mt-cell>
        <mt-cell v-on:click.native="outLogin" title="退出登录" is-link>
          <i class="iconfont iconzhuxiao icon"></i>
        </mt-cell>
        <!-- <mt-cell title="版本号">
          <i class="iconfont iconbanbenhao icon"></i>
          <span style="color: green">1.0.0</span>
        </mt-cell>-->
      </div>
    </div>
    <tabbar></tabbar>
  </div>
</template>

<script>
import tabbar from "../../utils/tabbar_me";
import https from "../../utils/http.js";
import CryptoJS from "crypto-js";
import axios from "axios";
export default {
  props: {},
  data() {
    return {
      selected: "two",
      infoData: {},
      head_img: require("../../assets/images/bg.jpg"),
      token: "009000380095002B00420018000D004D00070048007F002C00790027006400F0",
      Nickname: "",
      userIcon: "",
      Identity: 0,
      name: ""
    };
  },

  computed: {},
  created() {
    if (localStorage.getItem("Identity")) {
      this.Identity = localStorage.getItem("Identity");
    }
    if (localStorage.getItem("name")) {
      this.name = localStorage.getItem("name");
    }

    console.log(this.Identity);
  },
  mounted() {
    // this.getInfo();
    if (this.Identity == 0) {
      this.getData();
    }
  },
  watch: {},
  methods: {
    information() {
      this.$router.push("/information");
    },
    activity_list() {
      this.$router.push("/activity_list");
    },
    goUrl(){
      window.location.href= 'https://www.wjx.cn/jq/85296079.aspx'
    },
    getData() {
      https({
        method: "get",
        url: "/api/v1/Systems/GetDetail",
        data: {}
      })
        .then(res => {
          console.log(res);
          if (res.Code == 200) {
            this.infoData = res.Data;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    Statistics() {
      this.$router.push("/Statistics");
    },
    outLogin() {
      MessageBox.confirm("确定退出登录?")
        .then(action => {
          localStorage.setItem("token", "");
          localStorage.setItem("Identity", "");
          localStorage.setItem("name", "");
          this.$router.push("/index");
        })
        .catch(err => {});
    }
  },

  components: { tabbar }
};
</script>

<style scoped lang="less">
.main {
  width: 100%;
  // margin-top: 2.5rem;
  box-sizing: border-box;
  .main_top {
    padding-top: 1rem;
    height: 350px;
    // background: #ff4d4f;
    background-image: linear-gradient(to right, #ff4d4f, #eb6b62);
    border-bottom-left-radius: 30%;
    box-shadow: 1px 1px 5px #ff4d4f;
    position: relative;

    .head {
      width: 90%;
      height: 150px;
      margin: 0 auto;
      img {
        width: 150px;
        height: 150px;
        border-radius: 20px;
        float: left;
      }
      ul {
        float: left;
        margin: 0;
        padding: 20px 30px;
        li {
          list-style: none;
          color: #fff;
        }
        .name {
          font-size: 1.5rem;
        }
        .sta {
          font-size: 0.8rem;
          margin-top: 20px;
        }
      }
    }
    .head_footer {
      width: 80%;
      height: 200px;
      border-radius: 30px;
      background: #fff;
      position: absolute;
      bottom: -100px;
      left: 10%;
      box-shadow: 1px 1px 10px #ccc;
      color: #ff4d4f;
      ul {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        li {
          list-style: none;
          width: 50%;
          float: left;
          height: 200px;
          line-height: 200px;
          text-align: center;
          div {
            width: 100%;
            height: 100px;
            line-height: 100px;
          }
          .icon {
            height: 75px;
            margin-top: 25px;
            i {
              font-size: 3rem;
            }
          }
          // .span_icon {
          //   display: block;
          //   width: 50%;
          //   font-size: 1rem;
          //   height: 100%;
          //   span {
          //     position: absolute;
          //     top: -0px;
          //     margin-left: 10px;
          //     font-weight: 600;
          //   }
          // }
        }
      }
    }
  }
  .list {
    width: 100%;
    height: 98px;

    margin-top: 150px;

    .icon {
      position: absolute;
      left: 1rem;
      top: 1rem;
      font-size: 1.2rem;
      color: #ff4d4f;
    }
  }
}
</style>
